<template>
  <div class="repayment-table-container">
    <a-row
      class="repayment-header"
      type="flex"
      align="middle"
    >
      <a-col :span="7">
        <div class="header-td header-td-amount">
          <div class="label">
            <img
              width="16"
              src="~@/assets/images/base/small-bell.png"
              alt=""
            >
            Remaining Amount
          </div>
          <div class="value">
            $475
          </div>
        </div>
      </a-col>
      <a-col :span="7">
        <div class="header-td">
          <div class="label">
            Repayment Date
          </div>
          <div class="value">
            2021.10.7
          </div>
        </div>
      </a-col>
      <a-col :span="7">
        <div class="header-td">
          <div class="label">
            Status
          </div>
          <div class="value">
            <span class="icon" /> to be repaid
          </div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="header-td-button">
          <a-button
            shape="round"
            class="loan-button ant-btn-default"
            @click="$emit('repay')"
          >
            Repay
          </a-button>
        </div>
      </a-col>
    </a-row>

    <div class="table-container">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :pagination="false"
        size="middle"
      />
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: 'Application Date',
    dataIndex: 'data',
    align: 'center'
  },
  {
    title: 'Loan Amount',
    dataIndex: 'amount',
    align: 'center'
  },
  {
    title: 'Remaining Amount',
    dataIndex: 'remain_amount',
    align: 'center'
  }
];

const data = [
  {
    data: '25/09/2021',
    amount: '$450.00',
    remain_amount: '$450.00'
  }
];

export default {
  data() {
    return {
      data,
      columns
    };
  }
};
</script>

<style lang="scss" scoped>
.repayment-table-container {
  .repayment-header {
    .header-td-amount {
      img {
        margin-right: 5px;
      }
    }
    .header-td {
      display: flex;
      align-items: center;
      font-size: $font-size-lg;
      .label {
        color: $black;
        margin-right: $margin-xs;
        font-weight: 400;
      }

      .value {
        font-weight: bold;
        .icon {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: $red-2;
          border-radius: 50%;
        }
      }
    }

    .header-td-button {
      display: flex;
      justify-content: flex-end;
    }
  }

  .table-container {
    // min-height: 330px;
    margin-top: $margin-sm;
  }
}
</style>
